<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>upload</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
	<div class = "menu">
		<a class ="menuItem" href="/">Home</a>
		<a class ="menuItem" href="/gallery">Gallery</a> 
		<a class ="menuItem crrLink" href="/goToUploadImagePage">Upload Image</a> 
	</div>
	
	<div class="left_block">
	<button onclick="saveImage()">take picture</button>
	<video id="basic-stream" class="videostream" autoplay></video>
	<canvas  style="display:none; width:1600px;height:1200px;"></canvas>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
	window.URL = window.URL || window.webkitURL;
		function hasGetUserMedia() {
			// Note: Opera is unprefixed.
			return !!(navigator.getUserMedia || navigator.webkitGetUserMedia
					|| navigator.mozGetUserMedia || navigator.msGetUserMedia);
		}
		var socket = io.connect('http://192.168.0.104:555');
		
		// Not showing vendor prefixes.
		navigator.getUserMedia({
			video : true,
			audio : true
		}, function(localMediaStream) {
			/* console.log('aaa')
			socket.emit('data',localMediaStream); */
			x=localMediaStream;
			x.ondata = function(data){
				console.log(data)
			}
			video = document.querySelector('video');
			video.src = window.URL.createObjectURL(localMediaStream);

			video.onloadedmetadata = function(e) {
				console.log(e)
			};
			setInterval(function(){
				ctx.drawImage(video, 0, 0,160,120);
				socket.emit('data',canvas.toDataURL())
			},120)
		});
		
		canvas = document.querySelector('canvas');
		var ctx = canvas.getContext('2d');
		saveImage = function(){
			document.querySelector('img').src = canvas.toDataURL();
		}
	</script>
	<img height="600px" ></img>
	</div>
	
</body>
</html>